<script setup lang="ts">
// 布局  功能实现
/*
功能实现：
  1：左边盒子鼠标跟随
  2：限制左边盒子移动范围
  3：右边图片跟限盒子移动而移动，他们关系是二倍关系，方向相反
*/
import { ref } from 'vue'
import { useMouseInElement } from '@vueuse/core'
import { computed } from 'vue'
const target = ref(null)
const { elementX, elementY, isOutside } = useMouseInElement(target)
const newPoint = computed(() => {
  const obj = {
    x: elementX.value - 100,
    y: elementY.value - 100
  }
  // 左边限制
  if (obj.x < 0) {
    obj.x = 0
  }
  // 顶部限制
  if (obj.y < 0) {
    obj.y = 0
  }
  // 右边限制
  if (obj.x > 200) {
    obj.x = 200
  }
  // 下边限制
  if (obj.y > 200) {
    obj.y = 200
  }

  return obj
})
</script>

<template>
  <div class="left" ref="target">
    <img
      class="img"
      src="https://yanxuan-item.nosdn.127.net/79d16868803c34a1d82ea8dffd276f86.jpg"
      alt=""
    />
    <transition name="big">
      <div
        v-if="!isOutside"
        class="mask"
        :style="{ left: newPoint.x + 'px', top: newPoint.y + 'px' }"
      ></div>
    </transition>
  </div>
  <transition name="big">
    <div class="right" v-if="!isOutside">
      <img
        :style="{ left: -2 * newPoint.x + 'px', top: -2 * newPoint.y + 'px' }"
        class="img-big"
        src="https://yanxuan-item.nosdn.127.net/79d16868803c34a1d82ea8dffd276f86.jpg"
        alt=""
      />
    </div>
  </transition>
</template>

<style scoped lang="scss">
.left {
  margin-left: 100px;
  margin-top: 100px;
  width: 400px;
  height: 400px;
  background-color: #ccc;
  position: relative;
  .img {
    width: 100%;
    height: 100%;
  }
  .mask {
    width: 200px;
    height: 200px;
    background-color: #999;
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 0;
  }
}
.right {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  position: absolute;
  left: 520px;
  top: 100px;
  overflow: hidden;
  .img-big {
    width: 800px;
    height: 800px;
    position: relative;
    left: 0;
    top: 0;
  }
}

.big-enter-from,
.big-leave-to {
  opacity: 0 !important;
}
.big-enter-active,
.big-leave-active {
  transition: opacity 0.5s;
}
</style>
